<template>
  <div class="container" id="information">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">客户管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="navName == 1"
          :to="{ path: '/customers/list' }"
        >
          <div class="div3">我的客户</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="navName == 2"
          :to="{ path: '/assign_custom' }"
        >
          <div class="div3">分配客户</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="navName == 3"
          :to="{ path: '/openCustomers' }"
        >
          <div class="div3">公开客户</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="navName == 4" :to="{ path: '/jcGuide' }">
          <div class="div3">健驰客户</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">客户资料</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="record">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="客户详情" name="details"></el-tab-pane>
        <el-tab-pane label="消费记录" name="consumption">
          <consumption
            :customerId="id"
            :currentTab="currentTab"
            :tableColumn="columnConsumption"
            v-if="currentTab.name === 'consumption'"
          ></consumption>
        </el-tab-pane>
        <el-tab-pane label="分配记录" name="allocation">
          <consumption
            :customerId="id"
            :currentTab="currentTab"
            :tableColumn="columnAllocation"
            v-if="currentTab.name === 'allocation'"
          ></consumption>
        </el-tab-pane>
        <el-tab-pane label="跟进记录" name="followUp">
          <consumption
            :customerId="id"
            :currentTab="currentTab"
            :tableColumn="columnFollowUp"
            v-if="currentTab.name === 'followUp'"
          ></consumption>
        </el-tab-pane>
<!--        <el-tab-pane label="客户记录" name="record">
          <consumption
            :customerId="id"
            :currentTab="currentTab"
            :tableColumn="columnRecord"
            v-if="currentTab.name === 'record'"
          ></consumption>
        </el-tab-pane>
        <el-tab-pane label="标签/人群" name="labelCrowds"></el-tab-pane>-->
      </el-tabs>
    </div>

    <div v-if="activeName == 'details'" class="headerbox">
      <div class="header">
        <div class="title_left"></div>
        客户详情
      </div>
      <div class="headerbox_right">
        <!-- <el-button size="mini" type="primary" @click="refresh()"
          >刷新
        </el-button>
        <el-button size="mini" @click="back()">返回</el-button> -->
      </div>
    </div>
    <!-- 面包屑导航 -->
    <div v-if="activeName == 'details'" class="basic">
      <div class="header">
        <span>基本信息</span>
      </div>
      <div class="basic_content">
        <div style="display: flex">
          <div class="img-box">
            <div>
            <img
              v-if="customerData.gender == 1"
              alt=""
              src="../../assets/man_98.png"
            />
            <img
              v-if="customerData.gender == 2"
              alt=""
              src="../../assets/women_98.png"
            />
            <img
              v-if="customerData.gender == 0 || !customerData.gender"
              alt=""
              src="../../assets/unknown_98.png"
            />
          </div>
            <div class="text-box">
              <p v-if="customerData.vipName" class="vip-name"><span>{{customerData.vipName}}</span></p>
              <p v-if="customerData.recommendUserName">推荐人：{{customerData.recommendUserName || '-'}}</p>
              <p v-if="customerData.recommendUserPhone">推荐人手机号：{{customerData.recommendUserPhone || '-'}}</p>
              <p v-if="customerData.industry">行业：{{customerData.industry || '-'}}</p>
            </div>
          </div>
          <div class="basic_content_information">
            <div class="basic_content_information_name">
              <div class="name">{{ customerData.userName }}</div>
              <div class="basic_content_btn">
                <el-button
                  v-if="parArray.indexOf('block') != -1"
                  plain
                  :type="customerData.blackListFlag == 1 ? 'info' : 'primary'"
                  :disabled="customerData.blackListFlag == 1 ? true : false"
                  size="mini"
                  @click="handleBlock"
                  >
                  <img v-if="customerData.blackListFlag == 1" src="../../assets/icon_lahei_unclick.png" />
                  <img v-else src="../../assets/icon_lahei.png" />
                  拉黑</el-button>
                <el-button
                  v-if="parArray.indexOf('mcAddorder') != -1&&(customerData.typeNew=='3'||(isShow||userId == 1))"
                  icon="el-icon-circle-plus-outline"
                  plain
                  type="primary"
                  size="mini"
                  :disabled="customerData.blackListFlag == 1 ? true : false"
                  @click="addOrderForm"
                  >添单
                </el-button>
                <el-button
                  v-if="parArray.indexOf('btnEditCode') != -1"
                  icon="el-icon-edit-outline"
                  plain
                  type="primary"
                  size="mini"
                  @click="editInformation('编辑', 'edit')"
                  >编辑
                </el-button>
              </div>
            </div>
            <div class="basic_content_information_info">
              <ul>

                <li>
                  <span class="title">手机号码1</span>
                  <span class="info">{{ customerData.phone1 ? customerData.phone1 : "-" }}</span>
                </li>

                <li>
                  <span class="title">手机号码2</span>
                  <span class="info">{{ customerData.phone2 ? customerData.phone2 : "-" }}</span>
                </li>

                <li>
                  <span class="title">生日</span>
                  <span class="info">{{
                      customerData.birthday
                          ? customerData.birthday
                          : "-"
                    }}</span>
                </li>

                <li>
                  <span class="title">年龄</span>
                  <span class="info">{{ customerData.age ? customerData.age : "-" }}</span>
                </li>

                <li>
                  <span class="title">性别</span>
                  <span class="info">{{
                      customerData.gender
                          ? customerData.gender == 1
                              ? "男"
                              : "女"
                          : "-"
                    }}</span>
                </li>

                <li>
                  <span class="title">婚否</span>
                  <span class="info">{{
                      customerData.marriage
                          ? customerData.marriage == 1
                              ? "未婚"
                              : "已婚"
                          : "-"
                    }}</span>
                </li>

                <li>
                  <span class="title">身高(cm)</span>
                  <span class="info">{{ customerData.tall ? customerData.tall : "-" }}</span>
                </li>

                <li>
                  <span class="title">体重(kg)</span>
                  <span class="info">{{ customerData.weight ? customerData.weight : "-" }}</span>
                </li>

                <li>
                  <span class="title">地区</span>
                  <span class="info">{{
                      customerData.provinceCode
                          ? customerData.provinceCode +
                          customerData.cityCode +
                          customerData.regionCode
                          : "-"
                    }}</span>
                </li>

                <li>
                  <span class="title">余额</span>
                  <span class="info">{{ customerData.balance ? customerData.balance : "-" }}</span>
                </li>

                <li>
                  <span class="title">积分</span>
                  <span class="info">{{ customerData.points ? customerData.points : "-" }}</span>
                </li>

                <li>
                  <span class="title">详细地址</span>
                  <span class="info">{{ customerData.detailedAddress ? customerData.detailedAddress : "-"  }}</span>
                </li>

                <li>
                  <span class="title">推荐下线</span>
                  <span class="info">
                    一代：{{ customerData.firstFansCount }}，
                    二代：{{ customerData.secondFansCount }}，
                    三代：{{ customerData.thirdFansCount }}
                  </span>
                </li>

                <li>
                  <span class="title">礼包推荐成功人数</span>
                  <span class="info">{{ customerData.giftOrderPersonCount ? customerData.giftOrderPersonCount : "-" }}</span>
                </li>

              </ul>

            </div>
          </div>
          <div v-if="customerData.blackListFlag == 1" class="block">
            <img alt="" src="../../assets/icon_lahei].png" />
          </div>
        </div>
      </div>
      <!-- 近5条分配记录  -->
      <div >
         <div class="header">
          <span>近5条分配记录</span>
          <el-button @click="jumpToAllocation" type="text">查看更多<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </div>
        <div class="allocation_Box">
            <el-table
              :data="listData"
              style="width: 100%"
              class="site-data-list"
            >
              <el-table-column label="内容" prop="platformName " min-width="300">
                <template slot-scope="scope">
                    <p
              v-if="!scope.row.customerChannelUser"
              v-html="scope.row.content"
            ></p>
            <div v-if="scope.row.customerChannelUser&&scope.row.content!='自动同步'">
              <p>
                订单号：{{ scope.row.customerChannelUser.orderNo }} ,
                渠道:{{ scope.row.customerChannelUser.channelName }},
                客户名字:{{ scope.row.customerChannelUser.customerName }},
                电话:{{ scope.row.customerChannelUser.customerPhone }},
                入线时间:{{scope.row.customerChannelUser.orderTimeStr}}
              </p>
              <p>
                客户信息：{{scope.row.customerChannelUser.comment}}
              </p>
              <p>
                商品：{{ scope.row.customerChannelUser.prodName }} {{ scope.row.customerChannelUser.prodItem }}
              </p>
              <p>
                商品数量：{{ scope.row.customerChannelUser.prodNumber }}
                商品价格：{{ scope.row.customerChannelUser.prodPrice }}
                商品总价：{{ scope.row.customerChannelUser.totalMoney }}
              </p>
              <span style="margin-right:5px" v-if="scope.row.customerChannelUser&&scope.row.customerChannelUser.orderNo">收货电话:{{scope.row.customerChannelUser.addressPhone?scope.row.customerChannelUser.addressPhone:scope.row.customerChannelUser.customerPhone}}</span>
              <span>收货地址:{{ scope.row.customerChannelUser.address }}</span>
              <span style="color: red; display: inline-block; margin: 0 10px">
                支付状态：{{ scope.row.customerChannelUser.payTypeLabbl }}
              </span>
              <span>留言：{{ scope.row.customerChannelUser.customerMessage }}</span>
            </div>
            <div v-if="scope.row.customerChannelUser&&scope.row.content=='自动同步'">
                <p>
                  渠道:{{ scope.row.customerChannelUser.channelName }},
                  客户名字:{{ scope.row.customerChannelUser.customerName }},
                  电话:{{ scope.row.customerChannelUser.customerPhone }},
                  入线时间:{{ scope.row.customerChannelUser.orderTimeStr }}
                </p>
                <p>详情请到“我的客户”查看详情</p>
            </div>
                </template>
              </el-table-column>
              <el-table-column label="客服" prop="userName" min-width="100">
              </el-table-column>
              <el-table-column label="类型" prop="title" min-width="100">
              </el-table-column>
              <el-table-column label="操作人" prop="optionPerson" min-width="100">
              </el-table-column>
              <el-table-column label="操作时间" prop="createdTime" min-width="100"></el-table-column>
              <el-table-column label="操作" min-width="100">
                <template slot-scope="props">
                  <!-- 伟柏要求 -->
                  <el-button
                    v-if="parArray.indexOf('customeraddressUpdate') != -1&&props.row.customerChannelUser&&props.row.content!='自动同步'&&props.row.customerChannelUser.existsOrderNo!=1&&(props.row.isShow||userId == 1)"
                    type="text"
                    @click="goAddOrder(props.row)"
                    >关联开单
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <div class="header">
          <span>佣金统计</span>
        </div>
        <el-table
            :data="commissionStatisticsList"
            style="width: 100%"
            class="site-data-list"
        >
          <el-table-column label="佣金总数" prop="totalAmount"></el-table-column>
          <el-table-column label="账号可用佣金" prop="effectiveAmount" width="120"></el-table-column>
<!--          <el-table-column label="已到账" prop="appliedAmount" width="90"></el-table-column>-->
          <el-table-column label="冻结中" prop="awaitAmount"></el-table-column>
<!--          <el-table-column label="申请提现中" prop="applyingAmount"> </el-table-column>-->
          <el-table-column label="已提现" prop="appliedAmount"> </el-table-column>
          <el-table-column label="分享身份佣金" prop="vipAmount"></el-table-column>
          <el-table-column label="分享礼包佣金" prop="giftPackageAmount" width="180"></el-table-column>
          <el-table-column label="分享复购佣金" prop="goodsAmount" width="180"></el-table-column>
        </el-table>
      </div>
      <div>
        <div class="header">
          <span>跟进信息</span>
        </div>
        <el-table
          :data="customerData.customerUserList"
          style="width: 100%"
          class="site-data-list"
        >
          <el-table-column
            label="所属类目"
            prop="categoryName"
            width="90"
          ></el-table-column>
          <el-table-column label="来源平台" prop="platformName " width="120">
            <template slot-scope="scope">{{ scope.row.platformName }}</template>
          </el-table-column>
          <!--
          <el-table-column label="门店" prop="gateSentry">
            <template slot-scope="props">
              <p>
                {{ props.row.gateSentry }}
              </p>
            </template>
          </el-table-column>
          -->
          <el-table-column label="入线方式" prop="userDitchName" width="90">
          </el-table-column>
          <el-table-column label="客户意向" prop="userIntentionName" width="90">
          </el-table-column>
          <el-table-column label="客户等级" prop="userLevelName" width="90">
          </el-table-column>
          <el-table-column label="客户类型" prop="typeCN"> </el-table-column>
          <el-table-column label="是否首购" prop="isFirst">
            <template slot-scope="scope">
              {{scope.row.isFirst==1?'是':'否'}}</template>
            </el-table-column>
          <el-table-column label="所属部门" prop="orgName"> </el-table-column>
          <el-table-column label="跟进客服" prop="customerUserName ">
            <template slot-scope="scope">{{
              scope.row.customerUserName
            }}</template>
          </el-table-column>
           <el-table-column label="资源时间" prop="ditchTime" width="180">
            <template slot-scope="scope">{{$moment(scope.row.ditchTime?scope.row.ditchTime:scope.row.createdTime)}}</template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdTime" width="180">
            <template slot-scope="scope">{{
              $moment(scope.row.createdTime)
            }}</template>
          </el-table-column>
          <el-table-column label="最后编辑时间" prop="updatedTime" width="180">
            <template slot-scope="scope">{{
              $moment(scope.row.updatedTime)
            }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="props">
              <el-button
                v-if="parArray.indexOf('customeraddressUpdate') != -1"
                type="text"
                @click="addAddress('Followup', props.row)"
                >编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="activeName == 'details'" class="basic">
      <div class="header" style="margin-bottom: 0">
        <h3>收货地址</h3>
        <span
          ><i class="el-icon-circle-plus-outline" style="color: #4168e7"></i
          ><el-button
            v-if="parArray.indexOf('customeraddressAdd') != -1"
            style="color: #4168e7; padding-left: 0; margin-left: 0"
            type="text"
            @click="addAddress('Address')"
            >新增收货地址</el-button
          ></span
        >
      </div>
      <el-table
        :data="siteDataList"
        stripe
        style="width: 100%"
        class="site-data-list"
      >
        <el-table-column label="收货人" prop="userName"></el-table-column>
        <el-table-column label="手机号码" prop="phone"></el-table-column>
        <el-table-column label="地区" prop="userName">
          <template slot-scope="props">
            <p>
              {{
                props.row.provinceCode?
                props.row.provinceCode+
                props.row.cityCode +
                props.row.regionCode:'-'
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="详细地址" prop="detailedAddress">
        </el-table-column>
        <el-table-column label="默认地址">
          <template slot-scope="props">
            <el-switch
              v-if="parArray.indexOf('customeraddressIsTop') != -1"
              v-model="props.row.isDefault"
              :active-value="1"
              :inactive-value="0"
              @change="defaultSite(props.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="props">
            <el-button
              v-if="parArray.indexOf('customeraddressUpdate') != -1"
              type="text"
              @click="dialogEdit('addAddress', props.row)"
              >编辑
            </el-button>
            <el-button
              v-if="parArray.indexOf('customeraddressDelete') != -1"
              style="color: red"
              type="text"
              @click="dialogDelete(props.row.id)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 标签人群 -->
     <div v-if="activeName == 'labelCrowds'"  class="inquiry" >
          <div class="inquiry_header  ">
            <div class="header">
              <div class="title_left"></div>
              标签/人群
            </div>
          </div>
          <div class="center_box">
              <div class="center_box_left" id="center_box_left">
                <div class="center_box_left_title">
                  <div>添加自定义标签</div>
                  <div class="center_box_left_title_img" v-if="labelSatte==true" @click="closeLable"><img src="../../assets/icon_shouqi.png" alt=""><span class="close">收起</span></div>
                </div>
                 <el-button class="label_btn" v-if="labelSatte==false" type="primary" @click="labelAdd">新增自定义标签</el-button>
                <div v-if="labelSatte==true" class="treeStyle">
                 <!-- <label-tree ref="label-tree" typeStr="information" ></label-tree> -->
                 <labelTree ref="labelTree" :isShowCheckbox='true' typeStr="typePage" @selectArr="handlerLabelTree"></labelTree>
                </div>
                <div class="center_box_left_bottom" v-if="labelSatte==true">
                  <div class="center_box_left_bottom_lefttitle" >
                    <span class="center_box_left_bottom_item" v-if="userId==1">没有合适的标签？</span>
                    <span class="center_box_left_bottom_item" style="cursor:pointer;" @click="setUp" v-if="userId==1">请前往创建</span>
                  </div>
                  <div class="center_box_left_btn" >
                    <el-button class="label_cancel" @click="cancelTree">取消</el-button>
                    <el-button class="label_new" @click="newLable">新增</el-button>
                  </div>
                </div>
              </div>
              <div class="center_box_right" v-loading="loading">
                <div class="center_box_right_title">已获得标签</div>
                <div class="label">标签</div>
                <div>
                    <div class="program">程序化标签：</div>
                    <div style="margin-bottom:20px" v-if="programmingTagTiers!==null&&programmingTagTiers.length!=0">
                      <span  v-for="(item,index) in programmingTagTiers" :key="index" class="label_item">{{item.tagName}}</span>
                    </div>
                    <div v-else style="font-size:14px;color:#999999;padding-left: 20px;">暂无标签</div>
                </div>

                <div>
                  <div class="program">自定义标签：</div>
                  <div class="tag-list" v-if="customTagTiers!==null&&customTagTiers.length!=0">
                    <el-tag
                        :key="index"
                        v-for="(item, index) in customTagTiers"
                        closable
                        :disable-transitions="false"
                        @close="handleTagClose(item.id)">
                      {{item.tagName}}
                    </el-tag>
                  </div>
                  <div v-else style="font-size:14px;color:#999999;padding-left: 20px;">暂无标签</div>
                </div>

                <div>
                  <div class="crowds_label">人群</div>
                  <div v-if="groupTiers!==null&&groupTiers.length!=0">
                    <span v-for="(item,index) in groupTiers" :key="index" class="label_item">{{item.groupTierName}}</span>
                  </div>
                  <div v-else style="font-size:14px;color:#999999;padding-left: 20px;">暂无人群</div>
                </div>

              </div>
          </div>
    </div>
    <!-- 标签人群结束 -->
    <el-dialog
      :before-close="handleClose"
      :title="dialog.title"
      :visible.sync="dialog.visible"
      :width="dialog.width"
      append-to-body
      class="basic-dialog"
      :close-on-click-modal="false"
    >
      <template v-if="dialog.type === 'transaction'">
        <h3>transaction</h3>
      </template>
      <div v-if="dialog.type == 'addAddress'" class="addAddress">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="收货人姓名" label-width="100px" prop="userName">
            <el-input placeholder="请输入收货人姓名" v-model.trim="form.userName" style="width:96%"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" label-width="100px" prop="phone">
            <el-input
            style="width:96%"
              placeholder="请输入联系电话"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model.trim="form.phone"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="收货地址"
            label-width="100px"
            prop="addressValue"
          >
            <el-cascader
            style="width:96%"
              v-model="form.addressValue"
              :options="addressOptions"
              clearable
              filterable
              placeholder="请选择收货地址"
              @change="onChangeAddress"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="详细地址"
            label-width="100px"
            prop="detailedAddress"
          >
            <el-input placeholder="请输入详细地址"  v-model.trim="form.detailedAddress" style="width:96%"></el-input>
            <el-checkbox
              v-model="form.isDefault"
              :false-label="0"
              :true-label="1"
              >设为默认
            </el-checkbox>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="dialogSubmit('form')"
            >确 定</el-button
          >
        </span>
      </div>
      <template v-if="dialog.type == 'edit'">
        <add-customers
          ref="addCustomers"
          :clientObj="customerData"
          :dialogState="dialog.visible"
          :getDateList="getDateList"
          :type="dialog.type"
          :width="'700px'"
          v-on:closeDialog="closeDialog"
        ></add-customers>
      </template>

      <div v-if="dialog.type == 'Followup'" class="Followup">
        <el-form
          ref="formFollowup"
          :model="formFollowup"
          :rules="rulesFollowup"
          label-width="80px"
        >
          <el-form-item
            label="客户意向"
            label-width="80px"
            prop="userIntention"
          >
            <el-select
              v-model="formFollowup.userIntention"
              :disabled = "dialog.type == 'Followup'"
              filterable
              placeholder="选择客户意向"
              style="width: 100%"
            >
              <el-option
                v-for="item in dictionaries.customer_intention"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="客户等级"
            label-width="80px"
            prop="userIntention"
          >
            <el-select
              style="width: 100%"
              v-model="formFollowup.userLevelName"
              filterable
              placeholder="选择客户等级"
            >
              <el-option
                v-for="item in dictionaries.customer_level"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店" label-width="80px" prop="addressValue">
            <el-input
              maxlength="20"
              placeholder="选择输入门店"
              v-model.trim="formFollowup.gateSentry"
            ></el-input>
          </el-form-item>
           <el-form-item label="资源时间" >
             <el-date-picker
              style="width: 100%"
              v-model="formFollowup.ditchTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="followUpSubmit('formFollowup')"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addressData from '@/components/addressData.js'
import levelAddr from '@/components/levelAddr'
import consumption from './components/consumption.vue'
import { sessionStorage } from '../../assets/js/storage'
import addCustomers from './components/addCustomers.vue'
import labelTree from '../LabelGroup/components/LabelTree.vue'

export default {
  components: {
    levelAddr,
    consumption,
    addCustomers,
    labelTree
  },
  watch: {},
  data () {
    return {
      loading: false,
      labelArray: [], // 选择自定义标签的数组
      groupTiers: [], // 人群
      programmingTagTiers: [], // 程序化标签
      customTagTiers: [], // 自动化标签
      labelSatte: true, // 标签展开或者收起
      labelInput: '', // 标签搜索框
      isShow: '', //
      userId: '',
      lastTime: 0, // f防抖使用
      // 消费列表
      columnConsumption: [{ label: '订单编号', prop: 'orderId' },
      // { label: '品牌', prop: 'brandName' },
        { label: '订单状态 ', prop: 'statusLabel',
          render: (h, scope) => {
            return (
              <div>
                <p>{scope.row.statusLabel ? scope.row.statusLabel : '-'}</p>

              </div>
            )
          } },
        { label: '下单时间 ', prop: 'createdTime', width: 200 },
        { label: '商品名称', prop: 'goodsName', width: 200 },
        {
          label: '金额',
          render: (h, scope) => {
            return (
              <div>
                <p>总价：￥{scope.row.money}</p>
                <p>已收：￥{scope.row.receivedMoney}</p>
                <p>未收：￥{scope.row.awaitIncomeMoney}</p>
              </div>
            )
          }
        },
        // {
        //   label: '交易记录 ',
        //   render: (h, scope) => {
        //     return (
        //       <div>{scope.row.transactionCount}</div>
        //     )
        //   }
        // },
        { label: '订单来源 ', prop: 'sourceLabel' },
        { label: '订单分类 ', prop: 'orderGenerateTypeLabel' },
        { label: '发货时间', prop: 'sendTime' },
        // { label: '最后更新时间', prop: 'updatedTime', width: 200 },
        {
          label: '操作',
          render: (h, scope) => {
            return (
              <div>
                <el-link size='mini' type='primary' onClick={() => {
                  this.goOrderDetail(scope.row, scope.$index)
                }}>查看详情
                </el-link>
              </div>
            )
          }
        }],
      // 分配记录                   <span style='margin-right:5px' class={scope.row.customerChannelUser && scope.row.customerChannelUser.orderNo ? '' : 'hide-content'}>收货电话:{scope.row.customerChannelUser.addressPhone ? scope.row.customerChannelUser.addressPhone : scope.row.customerChannelUser.customerPhone}</span>
      columnAllocation: [
        {
          label: '内容', minWidth: 250, render: (h, scope) => {
            if (scope.row.customerChannelUser == null) {
              return (
                <span v-exchangeHtml:foo={scope.row.content} style='text-align: left;'></span>
              )
            }
            if (scope.row.customerChannelUser && scope.row.content !== '自动同步') {
              return (
                <span >
                  <p >
                    订单号：{ scope.row.customerChannelUser.orderNo } ,
                    渠道:{ scope.row.customerChannelUser.channelName },
                    客户名字:{ scope.row.customerChannelUser.customerName },
                    电话:{ scope.row.customerChannelUser.customerPhone },
                    入线时间:{scope.row.customerChannelUser.orderTimeStr}
                  </p>
                  <p>
                    客户信息：{scope.row.customerChannelUser.comment}
                  </p>
                  <p>
                    商品：{ scope.row.customerChannelUser.prodName } { scope.row.customerChannelUser.prodItem }
                  </p>
                  <p>
                    商品数量：{ scope.row.customerChannelUser.prodNumber }
                    商品价格：{ scope.row.customerChannelUser.prodPrice }
                    商品总价：{ scope.row.customerChannelUser.totalMoney }
                  </p>
                  <span style='margin-right:5px' class={scope.row.customerChannelUser && scope.row.customerChannelUser.orderNo ? '' : 'hide-content'}>收货电话:{scope.row.customerChannelUser.addressPhone ? scope.row.customerChannelUser.addressPhone : scope.row.customerChannelUser.customerPhone}</span>
                  <span>收货地址:{ scope.row.customerChannelUser.address }</span>
                  <span style='color: red; display: inline-block; margin: 0 10px'>
                    支付状态：{ scope.row.customerChannelUser.payTypeLabbl }
                  </span>
                  <span>留言：{ scope.row.customerChannelUser.customerMessage }</span>
                </span>
              )
            }
            if (scope.row.customerChannelUser && scope.row.content === '自动同步') {
              return (
                <span>
                  <p>
                  渠道:{ scope.row.customerChannelUser.channelName },
                  客户名字:{ scope.row.customerChannelUser.customerName },
                  电话:{scope.row.customerChannelUser.customerPhone },
                  入线时间:{scope.row.customerChannelUser.orderTimeStr }
                  </p>
                  <p>详情请到“我的客户”查看详情</p>
                </span>
              )
            }
          }
        },
        { label: '所属公司部门', prop: 'companyName', minWidth: 100 },
        { label: '客服 ', prop: 'userName', minWidth: 80 },
        { label: '类型 ', prop: 'title', minWidth: 80 },
        { label: '操作人 ', prop: 'optionPerson', minWidth: 80 },
        { label: '操作时间', prop: 'createdTime', minWidth: 100 },
        {
          label: '操作', minWidth: 100,
          render: (h, scope) => {
            return (
              <div class={scope.row.customerChannelUser && scope.row.content !== '自动同步' && scope.row.customerChannelUser.existsOrderNo != 1 && (scope.row.isShow || this.userId == 1) ? '' : 'hide-content'}>
                <el-link size='mini' type='primary' onClick={() => { this.goAddOrder(scope.row) }} style="{ color: 12 + 'px' }">关联开单</el-link>
              </div>
            )
          }
        }],
      // 跟进记录
      columnFollowUp: [
        { label: '跟进状况', prop: 'comment' },
        {
          label: '跟进类型',
          render: (h, scope) => {
            return (
              <div>
                <span>接听({scope.row.receiveState == 0 ? '无' : scope.row.receiveState})</span>/<span>微信({scope.row.wxFencing})</span>
              </div>
            )
          }
        },
        { label: '所属公司部门', prop: 'customerCompanyName' },
        { label: '跟进人 ', prop: 'customerName' },
        { label: '操作时间', prop: 'createdTime' }],
      // 客户记录
      columnRecord: [
        { label: '内容 ', prop: 'content' },
        { label: '类型 ', prop: 'type' },
        { label: '所属公司部门 ', prop: 'companyName' },
        { label: '操作人 ', prop: 'createdByName' },
        { label: '操作时间', prop: 'createdTime' }],
      addressOptions: [], // 地区 options
      isClickSave: false,
      dialog: { visible: false, title: '编辑', type: '', obj: {}, width: '30%' },
      rules: {
        userName: [
          { required: true, message: '请输入收货人姓名', trigger: 'blur' }
          // {
          //   validator: function (rule, value, callback) {
          //     if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
          //       callback(new Error('请输入中文'))
          //     } else {
          //       // 校验通过
          //       callback()
          //     }
          //   },
          //   trigger: 'blur'
          // }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位数的手机号码', trigger: 'blur' }
        ],
        addressValue: [
          { required: true, message: '请选择地址', trigger: 'change' }
        ],
        detailedAddress: [
          { required: true, message: '请输入详细地址', trigger: 'change' }
        ]
      },
      rulesFollowup: { // 跟进信息弹框校验
        userIntention: [
          { required: true, message: '请选择客户意向', trigger: 'change' }
        ],
        userLevelName: [
          { required: true, message: '请选择客户等级', trigger: 'change' }
        ],
        gateSentry: [
          { required: true, message: '请输入门店', trigger: 'blur' },
          { min: 1, max: 20, message: '最大可输入20字', trigger: 'blur' }
        ]

      },
      navName: 1,

      formFollowup: { // 跟进信息编辑内容
        userIntention: '',
        userLevelName: '',
        gateSentry: '',
        ditchTime: ''
      },
      form: {
        userName: '', // 姓名
        phone: '', // 联系电话
        provinceCode: '', // 省
        cityCode: '', // 市
        regionCode: '', // 区
        detailedAddress: '', // 详细地址
        addressValue: [],
        isDefault: 0
      },
      record: {
        name: '',
        time: new Date().getTime(),
        progress: '',
        progress1: ''
      },
      transactionRecordList: [], // 交易记录
      activeName: 'details',
      id: '',
      // 接收数据
      line: [],
      intention: [],
      rank: [],
      customer: [],
      pingZ: false,
      addressL: [],
      limits: '',
      parArray: [], // 公开客户
      disabledIf: false,
      salesAuthorityId: '',
      currentTab: {}, // 存放tab栏
      customerData: '', // 客户资料
      siteDataList: [], // 收货地址
      rowId: '',
      uid: '',
      userInfo: '',
      clientname: '',
      dictionaries: { // 字典数据
        customer_intention: [], // 客户意向
        customer_level: [], // 客户等级
        customer_type: [] // 客户类型

      },
      formFollowupRow: '', // 跟进信息
      tractringData: [],
      listData: [],
      page: { pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
      commissionStatisticsList: [] // 佣金统计

    }
  },
  created () {
    // 获取字典值
    for (const type in this.dictionaries) { this.getDictionaries(type) }

    this.activeName = 'details'
    this.getTractring()
    // 权限设定判断
    if (sessionStorage.getItem('salesAuthorityId')) {
      this.salesAuthorityId = JSON.parse(sessionStorage.getItem('salesAuthorityId'))
    }
    this.limits = (sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'myCustomersCode'
    )
    if (params.length) {
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code)
      })
    }
    this.userInfo = sessionStorage.getItem('userInfo')
    this.clientname = this.userInfo.reallyName
    this.userId = JSON.parse(sessionStorage.getItem('user_id'))

    // 权限设定判断
    this.uid = this.$route.query.uid// 客服id
    this.id = this.$route.query.id// 客户id

    // this.recordEvent();
    this.customerlist()
    this.getDateList()// 获取客户资料
    this.shippingAddressList()// 获取收货地址列表
    this.initTabs()
    this.trimAddressData() // 初始化地区数据
    this.getAllocation()
    //this.customertagInfo()// 查询客户的关联标签
  },
  activated () {
    if (
      this.$route.query.navName ||
      (this.$route.query.id != this.id && this.$route.query.id)
    ) {
      // 权限设定判断
      this.limits = (sessionStorage.getItem('limit'))

      // 权限设定判断
      if (this.$route.query.pingZ == undefined) {
        this.pingZ = false
      } else {
        this.pingZ = this.$route.query.pingZ
      }
      this.customerlist()
    }
    if (!this.is_null(this.salesAuthorityId)) { this.record.name = JSON.parse(sessionStorage.getItem('user_id')) }
    this.navName = this.$route.query.navName
    this.recordEvent()
    this.record.progress = ''
    this.record.progress1 = ''
    // this.disabledIf = true;
  },
  methods: {
    // 查询客户的关联标签
    customertagInfo () {
      this.loading = true
      const params = {
        customerUserId: this.id
      }
      this.$api.customertagInfo(params).then((res) => {
        console.log(this.loading)
        this.loading = false
        console.log(this.loading)

        if (res.code === 0) {
          this.programmingTagTiers = res.data.programmingTagTiers
          this.customTagTiers = res.data.customTagTiers
          this.groupTiers = res.data.groupTiers
        } else {
          this.programmingTagTiers = []
          this.customTagTiers = []
          this.groupTiers = []
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 取消tree选中
    cancelTree () {
      this.$refs.labelTree.$refs.tree.setCheckedKeys([])
      this.$refs.labelTree.cancelled()
    },
    // 前往创建
    setUp () {
      this.$router.push({ name: 'labelAdd', query: { type: 'diy', createWay: '2', state: 'add' }})
    },
    // 自定义标签选择
    handlerLabelTree (item) {
      console.log(item, 'item')
      if (item.length !== 0) {
        this.labelArray = []
        item.forEach((res) => {
          this.labelArray.push(res.id)
        })
        this.customertagAddCustomTag(this.labelArray)
      } else {
        this.$message.warning('请选择需要新增的标签！')
      }
      // this.labelArray = []
      // if (this.customTagTiers == null || this.customTagTiers.length == 0) {
      // item.forEach((res) => {
      //   this.labelArray.push(res.id)
      // })
      // this.customertagAddCustomTag(this.labelArray)
      // } else {
      // const resArray = []
      // const itemArray = []
      // this.customTagTiers.forEach((res) => {
      //   resArray.push(res.tagTierId)
      // })
      // item.forEach((it) => {
      //   itemArray.push(it.id)
      // })
      // console.log(resArray, itemArray)

      // var newArray = itemArray.filter(function (item) {
      //   return resArray.indexOf(item) == -1
      // })
      // console.log(newArray, 'itemArray')
      // this.customertagAddCustomTag(itemArray)
      // }
    },
    // 新增自定义标签
    customertagAddCustomTag (ids) {
      this.loading = true
      if (ids.length != 0) {
        const data = {
          customerUserBaseId: this.id,
          tagTierIds: ids
        }
        this.$api.customertagAddCustomTag(data).then((res) => {
          if (res.code == 0) {
            this.loading = false
            this.$message.success('新增成功！')
            this.$nextTick(function () {
              this.$refs.labelTree.$refs.tree.setCheckedKeys([])
            })
            this.customertagInfo()
          } else {
            this.loading = false
          }
        }).catch((err) => {
          console.log(err)
          this.loading = false
        })
      }
    },
    repeated (arr) {
      const res = new Map()
      return arr.filter(arr => !res.has(arr.id) && res.set(arr.id, arr.id))
    },
    // 新增自定义标签
    labelAdd () {
      this.labelSatte = true
      var ele = document.getElementById('center_box_left')
      ele.style.minWidth = '26%'
    },
    // 收起左侧标签
    closeLable () {
      this.labelSatte = false
      var ele = document.getElementById('center_box_left')
      ele.style.minWidth = '10%'
    },
    // 自定义标签删除
    handleTagClose (itemId) {
      // this.dynamicTags.splice(index, 1)
      const data = {
        id: itemId
      }
      this.$api.customertagDeleteCustomTag(data).then(res => {
        if (res.code == 0) {
          this.customertagInfo()
          this.$message.success('删除成功！')
        }
      }).catch(err => { console.log(err) })
    },

    // 客户资料查看更多跳转
    jumpToAllocation () {
      const tabObj = { index: '2', label: '分配记录', name: 'allocation', paneName: 'allocation' }
      this.currentTab = tabObj
      this.activeName = 'allocation'
    },
    // 获取分配记录
    getAllocation () {
      const params = {
        request:
            {
              customerId: this.id,
              pageNo: this.page.pageNo,
              pageSize: this.page.pageSize
            },
        version: ''
      }
      this.$api.customerAllocationList(params).then((res) => {
        // this.list = res.data.list
        res.data.list.forEach(res => {
          if (res.receiveState) {
            res.receiveState = this.tractringData.find((e) => e.dictId == res.receiveState).dictName
          }
          if (res.wxFencing) {
            res.wxFencing = this.tractringData.find((e) => e.dictId == res.wxFencing).dictName
          }
          if (res.userId == this.userId) {
            res.isShow = true
          } else {
            res.isShow = false
          }
        })
        res.data.list.slice(0, 5)
        if (res.data.list.length <= 5) {
          this.listData = res.data.list
        } else {
          this.listData = res.data.list.slice(0, 5)
        }
        this.page.totalNum = res.data.totalNum
        this.count++
      }).catch((err) => {
        console.log(err)
      })
    },
    getTractring () {
      this.axios
        .get('/sys/v1/common/by/group?groupId=' + 'tractring_record_type', {
          headers: {
            isLoading: false
          }
        }).then((res) => {
          if (res.code == 0) {
            this.tractringData = res.data
          }
        })
    },
    // 获取字典数据
    getDictionaries (type) {
      if (type && this.dictionaries[type].length > 0) { return }
      const params = { groupId: type }
      this.$api.dictionaries(params).then((res) => {
        this.dictionaries[type] = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    followUpSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            id: this.formFollowupRow.id,
            userIntention: this.formFollowup.userIntention,
            userLevel: this.formFollowup.userLevelName,
            gateSentry: this.formFollowup.gateSentry,
            ditchTimeStr: this.formFollowup.ditchTime
          }
          this.$api.categoryeditFollowup(data).then((res) => {
            if (res.code == 0) {
              this.$message.success('修改成功')
              this.dialog.visible = false
              this.getDateList()
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    },
    // 跟进信息编辑
    editFollowup (e) {

    },
    // 显示  dialog
    showDialog (title, type, row) {
      this.dialog.title = title
      this.dialog.type = type
      this.dialog.visible = true
    },
    // 消费记录 => 交易记录
    getTransactionRecord (row) {
      this.showDialog('交易记录', 'transaction')
    },
    // 跳转到【创建订单】页面
    goAddOrder (row) {
      console.log(row, 'row')
      this.$router.push({
        name: 'add_order',
        query: {
          userId: this.id,
          pingZ: true,
          serviceId: this.uid,
          clientId: this.id,
          orderNo: row.customerChannelUser.id,
          userRemark: row.customerChannelUser.customerMessage,
          payType: row.customerChannelUser.payType,
          platformId: row.customerChannelUser.platformId ? row.customerChannelUser.platformId : '25',
          t: new Date().getTime()
        }
      })
    },
    // 跳转到【订单】详情
    goOrderDetail (row) {
      this.$router.push({
        name: 'orderDetails',
        query: {
          orderNo: row.orderId,
          id: row.id,
          consumption: 'consumption'
        }
      })
    },
    // 编辑客户资料
    editInformation (title, type, row) {
      // 显示弹窗  dialog
      this.dialog.width = '50%'
      this.dialog.visible = true
      this.dialog.title = title
      this.dialog.type = type
      this.dialog.obj = type
    },
    closeDialog (state) {
      this.dialog.visible = state
    },
    addOrderForm () {
      this.$router.push({
        name: 'add_order',
        query: {
          userId: this.id,
          pingZ: true
        }
      }) // userId就是用户id
    },
    back () { this.$router.go(-1) },
    refresh () {
      this.shippingAddressList()
      this.getDateList()
    },
    // 编辑/修改提交数据
    dialogSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialog.title == '编辑') {
            const data = {
              userId: this.id,
              userName: this.form.userName,
              phone: this.form.phone,
              provinceCode: this.form.provinceCode, // 省
              cityCode: this.form.cityCode, // 市
              regionCode: this.form.regionCode, // 区
              detailedAddress: this.form.detailedAddress,
              isDefault: this.form.isDefault,
              id: this.rowId
            }

            // 获取当前时间的时间戳
            const now = new Date().valueOf()
            const that = this
            // 第一次点击
            if (this.lastTime == 0) {
              this.$api.categoryEditaddress(data).then((res) => {
                if (res.code == 0) {
                  this.$message.success('修改成功')
                  this.dialog.visible = false
                  this.shippingAddressList()
                }
              }).catch((err) => {
                console.log(err)
              })
              that.lastTime = now
            } else {
              if ((now - that.lastTime) > 2000) {
                // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
                that.lastTime = now
                this.$api.categoryEditaddress(data).then((res) => {
                  if (res.code == 0) {
                    this.$message.success('修改成功')
                    this.dialog.visible = false
                    this.shippingAddressList()
                  }
                }).catch((err) => {
                  console.log(err)
                })
                // 添加自己要调用的方法
              } else {
                console.log('不触发')
              }
            }
          } else {
            const data = {
              userId: this.id,
              userName: this.form.userName,
              phone: this.form.phone,
              provinceCode: this.form.provinceCode, // 省
              cityCode: this.form.cityCode, // 市
              regionCode: this.form.regionCode, // 区
              detailedAddress: this.form.detailedAddress,
              isDefault: this.form.isDefault
            }

            const now = new Date().valueOf()
            const that = this
            if (this.lastTime == 0) {
              this.$api.categoryAddaddress(data).then((res) => {
                if (res.code == 0) {
                  this.$message.success('新增成功')
                  this.dialog.visible = false
                  this.shippingAddressList()
                }
              }).catch((err) => {
                console.log(err)
              })
              that.lastTime = now
            } else {
              if ((now - that.lastTime) > 2000) {
                // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
                that.lastTime = now
                this.$api.categoryAddaddress(data).then((res) => {
                  if (res.code == 0) {
                    this.$message.success('新增成功')
                    this.dialog.visible = false
                    this.shippingAddressList()
                  }
                }).catch((err) => {
                  console.log(err)
                })
                // 添加自己要调用的方法
              } else {
                console.log('不触发')
              }
            }
          }
        } else {
          return false
        }
      })
    },
    // 地区修改
    onChangeAddress (val) {
      const addressOptions = this.addressOptions
      for (let i = 0; i < val.length; i++) {
        if (i === 0) {
          this.form.provinceCode = addressOptions[val[0]].label
          continue
        }
        if (i === 1) {
          this.form.cityCode = addressOptions[val[0]].children[val[1]].label
          continue
        }
        if (i === 2) {
          this.form.regionCode = addressOptions[val[0]].children[val[1]].children[val[2]].label
          continue
        }
      }
    },
    // 初始化地区数据
    trimAddressData () {
      const arr = []
      for (const province in addressData) {
        const childrenCity = []
        for (const city in addressData[province]) {
          const childrenArea = []
          addressData[province][city].forEach((e, i) => {
            childrenArea.push({ title: '市区', label: e, value: i })
          })
          childrenCity.push({ title: '城市', label: city, children: childrenArea, value: city })
        }
        arr.push({ title: '省份', label: province, children: childrenCity, value: province })
      }
      // 修改 value 值
      arr.forEach((e, i) => {
        e.value = i
        e.children.forEach((ee, ii) => {
          ee.value = ii
        })
      })
      this.addressOptions = arr
    },
    dialogDelete (id) {
      this.$confirm('是否删除该地址？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          addressId: id,
          userId: this.id
        }
        this.$api.categoryDeleteAddress(params).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.shippingAddressList()
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 弹框取消按钮
    handleClose () { this.dialog.visible = false },
    // 新增收货地址
    addAddress (type, row) {
      if (type == 'Address') {
        this.dialog.type = 'addAddress'
        this.dialog.title = '新增地址'
        this.dialog.visible = true
        this.dialog.width = '490px'
        this.form.userName = ''
        this.form.phone = ''
        this.form.detailedAddress = ''
        this.form.addressValue = ''
        this.form.isDefault = 0
        this.form.provinceCode = ''
        this.form.cityCode = ''
        this.form.regionCode = ''
        this.$nextTick(() => {
          this.$refs['form'].clearValidate()
        })
      } else if (type == 'Followup') {
        console.log(row, 'row')
        this.dialog.type = 'Followup'
        this.dialog.title = '编辑跟进记录'
        this.dialog.visible = true
        this.dialog.width = '520px'
        this.formFollowup.userIntention = row.userIntention ? row.userIntention + '' : ''
        this.formFollowup.userLevelName = row.userLevel ? row.userLevel + '' : ''
        this.formFollowup.gateSentry = row.gateSentry
        this.formFollowup.ditchTime = row.ditchTime

        this.formFollowupRow = row
      }
    },
    // 编辑按钮
    dialogEdit (type, row) {
      // this.$refs.addCustomers.clickData()
      this.form.addressValue = []
      this.addressOptions.find(province => {
        if (province.label == row.provinceCode) {
          this.form.addressValue.push(province.value)

          province.children.find((city) => {
            if (city.label == row.cityCode) {
              this.form.addressValue.push(city.value)
            }
            city.children.find((district) => {
              if (district.label == row.regionCode) {
                this.form.addressValue.push(district.value)
              }
            })
          })
        }
      })
      this.dialog.type = 'addAddress'
      this.dialog.title = '编辑'
      this.dialog.width = '450px'
      this.dialog.visible = true
      this.form.userName = row.userName
      this.form.phone = row.phone
      this.form.detailedAddress = row.detailedAddress
      this.form.isDefault = row.isDefault
      this.rowId = row.id
      this.form.provinceCode = row.provinceCode
      this.form.cityCode = row.cityCode
      this.form.regionCode = row.regionCode
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    // 是否设置为默认地址
    defaultSite (id) { this.setCategoryDefaultSite(id) },
    // 设置默认地址
    setCategoryDefaultSite (id) {
      const params = {
        id: id
      }
      this.$api.categoryDefaultSite(params).then((res) => {
        if (res.code == 0) {
          this.$message.success('设置成功！')
          this.shippingAddressList()
        }
      }).catch((err) => {
        console.log(err)
      })
    },

    // 收货地址列表数据
    shippingAddressList () {
      const params = {
        id: this.id
      }
      this.$api.categoryShippingAddress(params).then((res) => {
        if (res.code == 0) {
          this.siteDataList = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 客户个人资料
    getDateList () {
      const params = {
        id: this.id
      }
      this.$api.categoryDetails(params).then((res) => {
        if (res.code == 0) {
          console.log(res, '客户个人资料')
          res.data.customerUserList.forEach(item => {
            item.typeCN = this.dictionaries.customer_type.find((e) => e.dictId == item.type).dictName
            if (item.customerId == this.userId) {
              this.isShow = true
            } else {
              this.isShow = false
            }
            if (item.type == '3') {
              res.data.typeNew = item.type
            }
          })
          this.customerData = res.data
          this.getCommissionStatistics(res.data.phone1)
        }
      }).catch((err) => {
        console.log(err)
      })
    },

    // 客户佣金统计数据查询接口
    getCommissionStatistics (phone) {
      const params = { phone }
      this.$api.matrixByUserPhone(params).then((res) => {
        if (res.code == 0) {
          console.log(res.data)
          this.commissionStatisticsList.push(res.data)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 初始化TAB数据
    initTabs () {
      const orderTab = (sessionStorage.getItem('clientTab'))

      // 微商1 客服2
      if (!this.is_null(this.$route.query.activeName)) {
        this.activeName = this.$route.query.activeName
      } else if (!this.is_null(sessionStorage.getItem('clientTab'))) {
        this.activeName = sessionStorage.getItem('clientTab').name // this.$route.query.activeName;
        this.currentTab = sessionStorage.getItem('clientTab') // this.$route.query.activeName;
      } else if (orderTab) {
        this.currentTab = JSON.parse(sessionStorage.getItem('clientTab'))
        this.activeName = this.currentTab.name
      } else {
        this.activeName = 'details'
      }
    },
    // 拉黑
    handleBlock () {
      this.$confirm('是否拉黑该用户？拉黑后将无法对该用户进行操作', '拉黑提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: this.id
        }
        this.$api.addBlackList(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '拉黑成功!'
            })
            this.getDateList()
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {

      })
    },
    is_null (content) {
      if (content) {
        return false
      } else {
        return true
      }
    },
    // 客户下拉框数据
    customerlist () {
      this.axios
        .get(
          '/sys/v1/user/employee/by/sales/authority?salesAuthorityId=' +
          (sessionStorage.getItem('salesAuthorityId')),
          {
            headers: {
              isLoading: false
            }
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.customer = res.data
          } else {
            this.$message.error(res.message)
          }
        })
    },
    newLable () {
      this.$refs.labelTree.outTree()
      this.$refs.labelTree.cancelled()
      this.$nextTick(function () {
        this.$refs.labelTree.$refs.tree.setCheckedKeys([])
      })
    },
    handleClick (tab) {
      const tabObj = { index: tab.index, label: tab.label, name: tab.name, paneName: tab.paneName }
      this.currentTab = tabObj
      // 缓存后，可以在刷新后还可以保留在当前tab
      sessionStorage.setItem('clientTab', tabObj)
      const tab1 = tab.name
      this.activeName = tab1
      console.log(this.activeName, 'this.activeName')
    }

  }
}
</script>

<style lang="scss" scoped>
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
/*
/deep/ .el-dialog__body {
  padding: 45px 25px 0px 25px;
}
*/
.basic_content_information {
  margin-left: 24px;
  color: #666666;
  width: 80%;
  .basic_content_information_name {
    display: flex;
    padding-bottom: 23px;
    align-items: center;

    .Grade {
      padding: 0 16px;
      background-color: #edb840;
      opacity: 1;
      border-radius: 12px;
      line-height: 24px;
      text-align: center;
      color: #fff;
      margin-left: 11px;
      font-size: 14px;
    }

    .name {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 33px;
      color: #333333;
    }
  }
  .basic_content_information_info:after, .basic_content_information_info ul li:after{
    clear: both;
    display: table;
    content: '';
  }
  .basic_content_information_info{
    ul{
      li{
        width: 32%;
        float: left;
        font-size: 14px;
        margin-bottom: 10px;
        .title, .info{
          float: left;
          line-height: 200%;
          display: inline-block;
          //padding: 5px;
        }
        .title{
          width: 33%;
          font-weight: bold;
          text-align: right;
          //background-color: #dddddd;
        }
        .info{
          margin-left: 2%;
          width: 65%;
        }
      }
    }

    .el-row{
      font-size: 14px;
      .el-col-2{
        width: 65px;
        .text{
          text-align: right;
        }
      }
      .el-col-5{
        .data{
          padding-left: 24px;
        }
      }
    }
  }
}
.headerbox {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 24px;
  line-height: 50px;
  padding: 0 20px 0 20px;
  border-bottom: 1px solid #ededed;
  // padding-bottom: 10px;
  .header {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    .title_left {
      width: 4px;
      height: 16px;
      background: #4c81eb;
      opacity: 1;
      margin-right: 10px;
    }
  }
}

.basic {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 24px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    h3,
    span {
      font-size: 18px;
    }
    h3{font-weight: bold;}
    span {
      display: flex;
      align-items: center;
      i {
        margin-right: 5px;
      }
    }
    .header_right {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 20px;
      color: #999999;
    }
  }

  .basic_content {
    position: relative;
    width: 100%;
    min-height: 212px;
    background: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    opacity: 1;
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
    margin-bottom: 20px;

    .img-box {
      //display: flex;
      align-items: center;
      width: 110px;
      height: 98px;
      //overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }
      .text-box{
        font-size: 12px;
        p{
          &:first-child{
            //text-align: center;
            //margin: 10px auto;
          }
        }
        .vip-name{
          text-align: center;
          margin: 10px auto;
          span{
            color: #ff0000;
            background-color: #FFBA00;
            width: 150px;
            height: 48px;
            border-radius: 32px;
            font-weight: bold;
            padding: 5px 10px;
          }

        }
      }
    }
    .block {
      width: 106px;
      height: 106px;
      position: absolute;
      right: 0;
      top: 0;
      img {
        width: 100%;
        height: auto;
      }
    }
    .basic_content_btn {
      display: flex;
      align-items: center;
      margin-left: 40px;
      button{
        width: 82px;
        height: 36px;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        span{
          display: flex;
          justify-items: center;
          img{
            width: 16px; height: 16px; padding-right: 5px;
          }
        }
      }
    }
  }
}

.personalInformation,
.followUpInformation {
  margin-right: 10px;
  h3 {
    font-size: 16px;
    font-weight: bold;
  }
}

.personalInformation .personalInformation_data .el-row .el-col,
.followUpInformation .personalInformation_data .el-row .el-col {
  &:nth-child(odd) {
    width: 70px;
    text-align: right;
    color: #666666;
  }
}
.personalInformation .personalInformation_data .el-row .el-col,
.followUpInformation .personalInformation_data .el-row .el-col {
  &:nth-child(even) {
    margin-left: 30px;
    width: calc(50% - 100px);
  }
}

.formationBox {
  display: flex;
  .personalInformation,
  .followUpInformation {
    width: 49%;
    //height: 284px;
    background: rgba(255, 255, 255, 0.39);
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);
    opacity: 1;
    border-radius: 8px;
    padding: 24px;

    .personalInformation_data {
      font-weight: 400;
      .data {
        font-size: 16px;
        color: #333333;
      }
      .text {
        font-size: 14px;
        color: #666666;
      }
    }
  }
}
.basic-dialog{
  .el-dialog__body{
    padding: 30px;
  }
}
.el-dialog {
  .el-dialog__body {
    padding: 20px !important;
    .addAddress {

      .el-form {
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 22px;
        .el-form-item {
          &:last-child {
            margin-bottom: 0;
          }
          .el-form-item__content {
            .el-cascader {
              width: 100%;
            }
          }
        }
      }
      .dialog-footer {
        display: flex;
        justify-content: flex-end;
      }
    }
    .Followup {
      .el-form {
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 22px;
        .el-form-item {
          &:last-child {
            margin-bottom: 30px;
          }
          .el-form-item__content {
            .el-cascader {
              width: 100%;
            }
          }
        }
      }
      .dialog-footer {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
.allocation_Box{
  margin-bottom: 40px;
  max-height: 380px;
  overflow-y: scroll;
}
:deep(.hide-content) {
  display: none !important;
}
.inquiry {
  background: #fff;
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
    .inquiry_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    border-bottom: 1px solid #ededed;
      padding-bottom: 10px;
      .header {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      padding-bottom: 10px;

      .title_left {
        width: 4px;
        height: 16px;
        background: #4c81eb;
        opacity: 1;
        margin-right: 10px;
      }
    }
  }
}
.center_box{
  display: flex;
  margin-top: 24px;

  .center_box_left{
    min-width: 26%;
    height: 600px;
    padding: 15px 14px;
    box-sizing: border-box;
    border: 1px solid #E8EAEC;
    .center_box_left_input{
      width: 382px;
      margin-top: 16px;
      margin-bottom: 16px;
    }
    .center_box_left_title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 15px;
      .center_box_left_title_img{
        display: flex;
        align-items: center;
        line-height: 2px;
          cursor:pointer;

        .close{
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #4168E7;
          margin-left: 5px;
        }
      }

    }
    .label_btn{
        background: #4168E7;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        padding: 8px 9px !important;
        margin-top:16px;
      }
    .center_box_left_bottom{
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .center_box_left_bottom_lefttitle{
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #4168E7;
        .center_box_left_bottom_item{
          display: block;
        }
      }
      .center_box_left_btn{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .label_cancel{
          width: 50%;
          height: 35px;
          background: #FFFFFF;
          border: 1px solid #D9D9D9;
          opacity: 1;
          border-radius: 4px;
          line-height: 2px;
          color:  #999999;
      }
      .label_new{
          width: 50%;
          height: 35px;
          background:  #4168E7;
          opacity: 1;
          line-height: 2px;
          border-radius: 4px;
          color:  #ffffff;
      }
      }

    }
  }
  .center_box_right{
    min-width: 72%;
    height: 600px;
    margin-left: 16px;
    padding: 15px 14px;
    border: 1px solid #E8EAEC;
    box-sizing: border-box;
    .center_box_right_title{
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 24px;
    }
    .label{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20px;

    }
    .program{
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 16px;
    }
    .label_item{
      min-width: 72px;
      height: 32px;
      padding: 0 10px;
      background: #F0F3FD;
      opacity: 1;
      display: inline-block;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #4168E7;
      text-align: center;
      line-height: 30px;
      margin-right: 20px;
      margin-bottom: 10px;
    }
    .crowds_label{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20px;
      margin-top: 40px;
    }
  }
}
.tag-list{
  margin: 12px 0;
  .el-button{width: 224px;text-align: left;margin: 5px;}
  /deep/.el-tag{
    position: relative;
    min-width: 92px;
    margin-right: 20px;
    margin-bottom: 10px;
    text-align: center;
    border: none;
    background:#F0F3FD;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4168E7;
  }
  /deep/.el-icon-close{
    position: absolute;
    width: 13px;
    height: 13px;
    line-height: 14px;
    top: -8px;
    right: -8px;
    border: 1px solid #4168E7;
    color: #4168E7;
    border-radius: 50%;
  }

}
.treeStyle{
//  width: 382px;
 height: 480px;
 background: #F4F7FC ;
 overflow-y: scroll;
}
</style>
